<template>
  <div class="editor-video-container">
    <video 
      class="editor-video" 
      :src="props.src" 
      :poster="props.poster"
      :controls="props.controls"
      :autoplay="props.autoplay"
      :loop="props.loop"
      :muted="props.muted"
      :style="videoStyle"
    ></video>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

const props = defineProps({
  src: {
    type: String,
    default: 'https://www.w3schools.com/html/mov_bbb.mp4'
  },
  poster: {
    type: String,
    default: 'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png'
  },
  controls: {
    type: Boolean,
    default: true
  },
  autoplay: {
    type: Boolean,
    default: false
  },
  loop: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: 'auto'
  }
});

const videoStyle = computed(() => {
  return {
    width: props.width,
    height: props.height !== 'auto' ? props.height : undefined
  };
});

defineOptions({
  name: 'editor-video'
});
</script>

<style lang="scss" scoped>
.editor-video-container {
  position: relative;
  width: 100%;
  
  .editor-video {
    display: block;
    background-color: #000;
    border-radius: 4px;
    max-width: 100%;
  }
  
  &:hover {
    .editor-video {
      outline: 1px dashed #ccc;
    }
  }
}
</style> 